<template>
  <div class="container">
    <el-dialog
      :title="clickId >= 0 ? '修改学科' : '新增学科'"
      :visible="dialogShow"
      width="400px"
      @close="cancel"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="elForm"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            v-model="ruleForm.subjectName"
            placeholder="请输入学科名称"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="ruleForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <div class="rightbutton">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { add } from "@/api/hmmm/subjects";
export default {
  props: ["dialogShow", "clickId"],
  data() {
    return {
      ruleForm: {
        subjectName: "",
        isFrontDisplay: true,
      },
      rules: {
        subjectName: [
          { required: true, message: "请输入学科名称", trigger: "blur" },
          // {
          //   validator: (rule, value, callback) => {
          //     if (!value) {
          //       return callback(new Error("请输入学科名称"));
          //     };
          //     if (this.clickId>=0 && ) {
          //       // 如果是修改学科

          //     }
          //   },
          //   trigger: "blur",
          // },
        ],
      },
    };
  },
  methods: {
    // 点击确认按钮上传数据
    async submitForm() {
      // 如果是修改学科
      if (this.clickId >= 0) {
      } else {
        // 如果是新增学科
        // 全局判断
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
          } else {
            return false;
          }
        });
        // 上传请求数据
        let res = await add(this.ruleForm);
        console.log(res);
        this.$message.success("添加成功");
        this.cancel();
        // 刷新数据
        this.$emit("updateData");
      }
    },
    // 重置表单项和校验结果
    resetForm() {
      this.$refs["ruleForm"].resetFields();
    },

    // 关闭对话框
    cancel() {
      // 重置表单项和校验结果
      this.$refs["ruleForm"].resetFields();
      this.$emit("update:dialogShow", false);
    },
  },
};
</script>

<style scoped lang='scss'>
.container {
  .rightbutton {
    text-align: right;
  }
}
</style>
